<template>
    <div>
    	<!-- 头部、、登录、、、快捷登录 -->
    	<div class="head">
    		<image :src="src1" class="headd" @click="show2()" resize="cover"></image>
    		<text class="head1">快捷登录</text>
    		<text class="head2" @click="shortcut_login()">密码登录</text>
    	</div>
    	<!-- 头像框 -->
    	<div class="sculpt">
    		<image :src="src2" class="sculpture" resize="cover"></image>
    	</div>
    	<!-- 手机账号 -->
    	<div class="phone">
    		<div class="phone1">
    			<image :src="src3" class="phone2" resize="cover"></image>
    			<input v-model="phoneNumber" type="text" placeholder="请输入手机号" class="inp1" />
    			<text class="text001">丨</text>
    			<text class="text002" @click="get_verification_code()" v-if="show007">{{item}}</text>
          <text class="text002 count" v-if="!show007">{{count}}秒</text>
    		</div>
    	</div>
    	<!-- 密码 -->
    	<div class="password">
    		<div class="pass1">
    			<image :src="src4" class="phone3" resize="cover"></image>
    			<input v-model="vrfCode" type="text" placeholder="请输入验证码" class="inp2" />
    		</div>
    	</div>
    	<!-- 找回密码 -->
    	<!-- <div class="zhaohui">
    		<text class="zhaohui1" @click="search_pass()">找回密码</text>
    	</div> -->
    	<!-- 登录按钮 -->
    	<div class="button">
    		<div class="denglu" @click="show1()">
    			<text class="dengll">登录</text>
    		</div>
    	</div>
    	<div class="xieyi">
    		<text style="font-size: 12px;">说明：登录代表您已经同意车e家</text>
    		<text style="color: #33c179; font-size: 12px;" @click="user_agreement()">《用户协议》</text>
    	</div>
    	<!-- 万能的分割线！！！！！      弹窗！！！！ -->
	     <div class="wrap" v-if="show">
	     	<div class="wqqq" v-if="show">
	     		
	     	</div>
	        <div class="wrap-1">
	          <div class="wrap-2">
	            <text class="wrap-3">是不是忘记密码啦？建议找回密码或用短信快捷登录哦~</text>
	            <div class="wrap-4">
	              <text @click="show7()" class="zhaohui11">找回密码</text>
	             <!--  <text>丨</text> -->
	              <text @click="show8()" class="duanxin11">短信登录</text>
	            </div>
	          </div>
	        </div>
	     </div> 
    </div>
</template>
<style scoped>
    .head{
    	width: 100%;
    	height: 32px;
    	/*background-color: pink;*/
    	box-sizing: border-box;
    	line-height: 32px;
    	flex-direction: row;
    	justify-content: center;
    	align-items: center;
    	margin-top: 17px;
    	position: fixed;
    	box-shadow: 1px 1px 1px #ccc;
    	position: relative;
    }
    .headd{
    	width: 15px;
    	height: 20px;
    	/*background-color: #33c179;*/
    	position: fixed;
    	left: 12px;
    }
    .xieyi{
    	width: 100%;
    	height: 24px;
    	justify-content: center;
    	align-items: center;
    	flex-direction: row;
    	margin-top: 19px;
    }
    .button{
    	width: 100%;
    	height: 36px;
    	justify-content: center;
    	align-items: center;
    	margin-top: 35px;
    }
    .denglu{
    	width: 160px;
    	height: 36px;
    	border-radius: 70px;
    	background-color: #33c179;
    	justify-content: center;
    	align-items: center;
    }
    .dengll{
    	color: #fff;
    }
    .zhaohui{
    	width: 100%;
    	height: 13px;
    	/*background-color: pink;*/
    	margin-top: 13px;
    	box-sizing: border-box;
    }
    .zhaohui1{
    	font-size: 13px;
    	line-height: 13px;
    	margin-left: 283px;
    	color: #33c179;
    }
    .head2{
    	position: absolute;
    	right: 12px;
    	margin-left: 80px;
    	font-size: 16px;
    	color: #666;
    	bottom: 3px;
    }
    .head1{
    	font-size: 20px;
    }
  	.sculpt{
  		width: 100%;
  		justify-content: center;
  		align-items: center;
  		height: 99px;
  		margin-top: 67px;
  	}
  	.sculpture{
  		width: 99px;
  		height: 99px;
  		border-radius: 50%;
  		background-color: #33c179;
  	}
  	.phone{
  		width: 100%;
  		height: 40px;
  		/*background-color: pink;*/
  		justify-content: center;
  		align-items: center;
  		margin-top: 33px;
  		z-index: 1;
  	}
  	.password{
  		width: 100%;
  		height: 40px;
  		/*background-color: pink;*/
  		margin-top: 25px;
  		justify-content: center;
  		align-items: center;
  	}
  	.phone1{
  		width: 300px;
  		height: 40px;
  		/*background-color: red;*/
  		flex-direction: row;
  		border-bottom: solid 1px #999;
  		z-index: 1;
  	}
  	.pass1{
  		width: 300px;
  		height: 40px;
  		/*background-color: red;*/
  		flex-direction: row;
  		border-bottom: solid 1px #999;
  	}
  	.phone2{
  		width: 18px;
  		height: 24px;
  		/*background-color: #33c179;*/
  		margin-left: 20px;
  		margin-top: 10px;
  	}
  	.phone3{
  		width: 17px;
  		height: 21px;
  		/*background-color: #33c179;*/
  		margin-left: 20px;
  		margin-top: 10px;
  	}
  	.inp1{
  		border: none;
  		margin-left: 10px;
  		width: 150px;
  		/*border-right: solid 2px #999;*/
  		padding-left: 10px;
  	}
  	.inp2{
  		border: none;
  		margin-left: 10px;
  		padding-left: 10px;
  	}
  	.wrap{
      width: 100%;
      height: 100%;
      position: fixed;
      /*background-color: #000;*/
      z-index: 9999;
      justify-content: center;
      align-items: center;
      opacity: 1;
    }
    .wqqq{
      width: 100%;
      height: 100%;
      position: fixed;
      background-color: #000;
      z-index: 99;
      opacity: .9;
      justify-content: center;
      align-items: center;
    }
    .wrap-1{
      width: 237px;
      height: 168px;
      border-radius: 10px;
      background-image: url(http://192.168.2.123:8080/img/dialog_one.png);
      background-size: 237px 168px;
      opacity: 1;
      box-sizing: border-box;
      padding-top: 28px;
      z-index: 99;
      background-color: #fff;
    }
    .wrap-2{
      width: 200px;
      height: 100px;
      justify-content: center;
      align-items: center;
      margin-left: 23px;
      opacity: 1;
    }
    .wrap-3{
      justify-content: center;
      align-items: center;
      font-size: 14px;
      opacity: 1;
    }
    .wrap-4{
      flex-direction: row;
      width: 220px;
      height: 31px;
      margin-top: 24px;
      justify-content: space-around;
      /*background-color: pink;*/
      align-items: center;
      opacity: 1;
    }
    .zhaohui11,.duanxin11{
      width: 83px;
      height: 31px;
      border-radius: 25px;
      background-color: #33c179;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 16px;
      text-align: center;
      line-height: 31px;
      opacity: 1;
    }
    .text001{
    	margin-top: 10px;
    	color: #666;
    }
    .text002{
    	color: #33c179;
    	margin-top: 10px;
    }
</style>
<script>
var stream = weex.requireModule('stream');
import "../../../js/jquery-1.8.3.js"
export default {
	data(){
	    return {
	    	src1: 'http://192.168.2.123:8080/img/index_back.png',
	    	src2: 'http://192.168.2.123:8080/img/header.jpg',
	    	src3: 'http://192.168.2.123:8080/img/login-phone-black.png',
	    	src4: 'http://192.168.2.123:8080/img/login_pass.png',
	    	show: false,
        item: '获取验证码',
        show007: true,
        timer: null,
        count: '',
        phoneNumber:"",
			vrfCode:"",
			hash:"",
			tamp:"",
	    }
	},
    mounted:function(){
      // 引用jquery发送ajax请求方式，暂且不用

      $(".text002").click(function(){
        // $.ajax('http://1.194.233.171:8081/api/dept/sendMsg',{
        //     type:'post',
        //     data:{"phoneNumber":$('.inp1').val()},
        //     dataType: 'json',
        //     beforeSend:function(){
        //       console.log("send msg")
        //     },
        //     success:function(data,aaa){
        //         console.log(data)
        //         console.log(aaa)
        //     }
        // })
      })

  },
	methods: {		 
	   // 点击跳转用户协议
	   user_agreement(){
	   		this.$router.push('/user_agreement');
	   },
	   // 点击返回登录页
	   shortcut_login(){
	   		this.$router.push('/login');
	   },
		show1(){
	       // 点击登录验证验证码
            stream.fetch({
                method: "POST",
                url: "http://192.168.2.140:8081/api/dept/validateNum",
                type: "json",
                headers:{"Content-Type":"application/json"},
				body: `{
				"phoneNumber":${JSON.stringify(this.phoneNumber)},
				"msgNum":${JSON.stringify(this.vrfCode)},
				"hash":${JSON.stringify(this.hash)},
  				"tamp":${JSON.stringify(this.tamp)}
				}`,
        },function(ret){
                console.log(ret);

                if(ret.data.data.rode===1){

                    // 存id
                    const info = {
                        ssid: ret.data.data.accountid,
                    };
                    localStorage.setItem('usersid', JSON.stringify(info));

                    location.href="#/home";
				}

            },function(res){
                console.log(res)
            });
            // this.$router.push('/create_shop')
		},
     // 点击返回密码登录
	   show2(){
	   		this.$router.push('/login');
	   },
     // 点击获取验证码
     get_verification_code(){
         let re = /^1[0-9]{10}$/;
	       if(re.test(this.phoneNumber)) {
               console.log(this.phoneNumber);
               const TIME_COUNT = 60;//变量60
               stream.fetch({
                   method: "POST",
                   url: "http://192.168.2.140:8081/api/dept/sendMsg",
                   body: `{"phoneNumber":${JSON.stringify(this.phoneNumber)}}`,
                   type: "json",
                   headers: {"Content-Type": "application/json"}
               },(ret)=>{
                   console.log(ret)
				   if(ret.data.data.rode===1){
                       alert("您好！请先注册")
					   location.href="#/register"
				   }
				   // if()
                   this.hash = ret.data.data.hash;
				   this.tamp=ret.data.data.tamp;
               }, function (res) {
               });

               if (!this.timer) {
                   this.count = TIME_COUNT;  //赋值给count
                   this.show007 = false;     //获取验证码变成时间
                   this.timer = setInterval(() => { //设置定时器
                       if (this.count > 0 && this.count <= TIME_COUNT) {
                           this.count--;
                       } else {
                           this.show007 = true;
                           this.item = '重新获取';
                           clearInterval(this.timer);
                           this.timer = null;
                       }
                   }, 1000);
               }
           }else{
	           alert("请检查手机号码");
		   }
     }
	},

}
</script>